import React, {useState} from 'react';
import classes from './index.module.scss'
import {Button, Checkbox, message, Modal} from "antd";
import {useDispatch, useSelector} from "react-redux";
import {reqGetVipPayStatus} from "../../../../api/frontDesk/frontDeskApi";
import {updateUserAllInfo} from "../../../../store/userSlice";
import {useNavigate} from "react-router-dom";


const powerItems = [
    {
        icon: '',
        powerName: '内部课'
    },
    {
        icon: '',
        powerName: '借阅卡'
    },
    {
        icon: '',
        powerName: '买课打折'
    },
    {
        icon: '',
        powerName: '专属积分'
    },
    {
        icon: '',
        powerName: '就业指导'
    },
    {
        icon: '',
        powerName: '专属客服'
    },
    {
        icon: '',
        powerName: '活动优先'
    },
    {
        icon: '',
        powerName: '身份展示'
    },
]

const vipCardList = [
    {
        level: '月度会员',
        price: '￥39.90',
        treatment: '3张优惠券'
    },
    {
        level: '季度会员',
        price: '￥99.90',
        treatment: '5张优惠券'
    },
    {
        level: '年度会员',
        price: '￥229.90',
        treatment: '10张优惠券'
    },
]

var timer
const BuyVip = () => {

    const [checked, setChecked] = useState(false)
    const [chooseVip, setChooseVip] = useState('月度会员')
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [codeUrl, setCodeUrl] = useState('')
    const {userAllInfo} = useSelector(state => state.persistedReducer.user)
    const nav = useNavigate()
    const dispatch = useDispatch()


    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };

    const switchVip = (level) => {
        setChooseVip(level)
    }

    //确认按钮
    const confirm = async () => {
        const user_id = userAllInfo.id
        if (checked) {
            try {
                setIsModalOpen(true);
                const result = await reqGetVipPayStatus({user_id, role: chooseVip})
                setCodeUrl(result.codeUrl)
                timer = setInterval(async () => {
                    let {scan} = await reqGetVipPayStatus({user_id, role: chooseVip})
                    if (scan) {
                        clearInterval(timer)
                        timer = null
                        setIsModalOpen(false)
                        // nav('/pay-success')
                        scan = false
                        dispatch(updateUserAllInfo(chooseVip))
                        message.success('支付成功')
                        nav('/user-center')
                    }
                }, 1000)
            } catch (e) {
                message.error(e)
            } finally {
                setIsModalOpen(true);
            }
        } else {
            message.info('请先勾选按钮')
        }
    }

    const afterClose = async () => {
        clearInterval(timer)
        timer = null
        setIsModalOpen(false)
    }

    return (

        <div className={classes.Container}>
            <div className={classes.Header}>
                <h2 style={{marginLeft: 15}}>vip购买</h2>
            </div>
            <div className={classes.Body}>
                {
                    vipCardList.map((item) => (
                        <div key={item.level}
                             className={chooseVip === item.level ? `${classes.VipCard} ${classes.Selected}` : `${classes.VipCard}`}
                             onClick={() => switchVip(item.level)}
                        >
                            <div className={classes.Content}>
                                <h2>{item.level}</h2>
                                <div>
                                    {item.price}
                                </div>
                                <div>
                                    {item.treatment}
                                </div>
                            </div>
                        </div>
                    ))
                }
                <div className={classes.Power}>
                    {
                        powerItems.map((item) => (
                            <div key={item.powerName} className={classes.smallPower}>
                                <div>{item.icon}</div>
                                <span style={{fontSize: 14, color: '#888'}}>{item.powerName}</span>
                            </div>
                        ))
                    }
                </div>
            </div>
            <div className={classes.Footer}>
                <div className={classes.Pay}>
                    <div className={classes.PayContent}>
                        <div className={classes.Price}>
                            <span style={{fontSize: 22, fontWeight: 'bold'}}>实付款：</span>
                            <span style={{fontSize: 32, fontWeight: 'bold', color: '#f64242'}}>￥123.00</span>
                        </div>
                        <div className={classes.Confirm}>
                            <Button type="primary" onClick={confirm}>确认</Button>
                            <Checkbox onClick={(e) => {
                                setChecked(e.target.checked)
                            }}>知悉并同意协议</Checkbox>
                        </div>
                    </div>
                </div>
            </div>
            <Modal
                afterClose={afterClose}
                centered
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
                footer={null}
                width={400}
            >
                <img style={{width: "100%"}} src={codeUrl} alt=''/>
            </Modal>
        </div>
    );
};

export default BuyVip;